<template>
    <div style="overflow-y: scroll;" id="right">
        <el-table :data="tableData" size="small" height="83.5vh" highlight-current-row
            @current-change="handleCurrentChange">
            <el-table-column prop="date" label="Date" width="120" />
            <el-table-column prop="name" label="Name" width="100" />
            <el-table-column prop="address" label="Address" show-overflow-tooltip width="300" />
            <el-table-column prop="address" label="Address" show-overflow-tooltip width="300" />
            <el-table-column prop="address" label="Address" show-overflow-tooltip width="300" />
            <el-table-column prop="address" label="Address" show-overflow-tooltip width="300" />
        </el-table>
    </div>
</template>

<script>




export default {
    data() {
        return {
            currentRow: null,
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]

        };
    },
    mounted() {

    },
    methods: {
        handleCurrentChange(val) {
            this.currentRow = val;
        }
    }
};

</script>

<style></style>
